<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>AdminLTE 2 |地址信息</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}"/>
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/adminlte/bower_components/font-awesome/css/font-awesome.min.css}"/>
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{/adminlte/bower_components/Ionicons/css/ionicons.min.css}"/>
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/adminlte/dist/css/AdminLTE.min.css}"/>
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" th:href="@{/adminlte/dist/css/skins/_all-skins.min.css}"/>
  <link rel="stylesheet" th:href="@{/adminlte/demo-center.css}" />
  <link rel="stylesheet" th:href="@{/bootstrap-table/bootstrap-table.css}"/>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=c90556670e5484fddaaa15087d0e556f&plugin=AMap.Scale,AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch"></script>

  <script th:src="@{https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js}"></script>
  <script th:src="@{https://cache.amap.com/lbs/static/es5.min.js}"></script>
    <script th:src="@{/adminLTE/js/jquery-3.4.1.min.js}"></script>
  <style>
      html,
      body,
      #container {
        width: 100%;
        height:850px;align-self: auto;
      }
      .t{
        position: absolute;
        left:225px;
        top:4px;
        
      }

      .tt {
          position: absolute;
          left: 320px;

          top: 4px;
      }
      .xialak{
          position: absolute;
          left: 100px;

          top: 0px;
      }
      .ttt {
          position: absolute;
          left: 530px;
          top: 4px;

      }

      .tttt {
          position: absolute;
          top: -8px;

      }
      .btn1{
          position: absolute;
          left: 590px;
          top: 4px;

      }
      .ipt1{
          position: absolute;
          left: 700px;
          top: 4px;

      }
      .lnglat {
        color: #0288d1;
      }
      .input-card {
            width: 150px;
            top: 10px;
            bottom: auto;
        }

      .ip {
        margin-top: -40px;
        margin-left: -10px;
        width: 500px;
        height: 20px;
        background-color: #ddf;       
        border: 1px solid silver;   
        border-radius: 5px;     
      }
    </style>
       <style type="text/css">
        #panel {
            position: absolute;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">

    <div th:replace="/common/header :: header"></div>

    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="/common/menu :: menu"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
    <!-- <h1>
      Dashboard
      <small>Version 2.0</small>
    </h1> -->
    <!-- <div class="autoclass">
      <input type="text" id="keyword" placeholder="请输入关键词" name="keyword"  style="width: 20%;"/>  

      <div id="result1" class="autobox" name="result1"></div>
      
  </div> -->
  
    <div class="input-item" style="width: 25%">

       <div class="tttt" >
       <div style="display:inline-block;top:-10px">
          <input type="text" id="keyword" name="keyword" style="width:200px" value="请输入关键字：(选定后搜索)" onfocus='this.value=""'/>
       </div>
   
   
          
        <div class="input-item-prepend"   style="display:inline-block;display: none">
            <span class="input-item-text" >行政级别</span>
        </div>
        <div  style="display:inline-block;display: none">
            <select id="level" >
                <option value="district">district</option>
                <option value="city">city</option>
                <option value="province">province</option>
                <option value="country">country</option>
            </select>

        </div>
       
        <div class="t">
            <div class="input-item-prepend" >
                <span class="input-item-text"  style="width:100px;">行政区规划</span>
            </div>
        </div>
       

        <div class="tt" style="display:inline-block;">
            <div style="display:inline-block;">
                <input id='district' type="text" style="width:100px;">

            </div>
            <div>
                <select class="xialak" id='test' style="width:100px" onchange="zz(this.id)" >
                    <option>--请选择--</option>
                    <option value='1'>彭州市</option>
                    <option value="2">都江堰市</option>
                    <option value="3">青白江区</option>
                    <option value="4">崇州市</option>
                    <option value="5">大邑县</option>
                    <option value="6">简阳市</option>
                    <option value="7">蒲江县</option>
                    <option value="8">金堂县</option>
                    <option value="9">新津县</option>
                    <option value="10">邛崃市</option>
                    <option value="11">青羊区</option>
                    <option value="12">温江区</option>
                    <option value="13">武侯区</option>
                    <option value="14">双流区</option>
                    <option value="15">郫都区</option>
                    <option value="16">金牛区</option>
                    <option value="17">新都区</option>
                    <option value="18">龙泉驿区</option>
                    <option value="19">成华区</option>
                    <option value="20">锦江区</option>
                </select>
            </div>

        </div>
        <div class="ttt">
            <input id="draw" type="button" class="btn" value="查询"  style="display:inline-block;">
        </div>

<!--           <button class="btn1" style="width: 44px" onclick="ClearTextBox()">重置</button>-->
           <button class="btn1" style="width: 44px" id="cleartext">重置</button>

           <input type="text" class="ipt1" readonly="true" id="lnglat" >
       
     </div> 
  </div>

    <ol class="breadcrumb">

    </ol>
  </section>

    <div id="container" ></div>


      
<div id="panel"></div>
<!-- -------------------------------------------------边界查询 -->

 
</div>
<!-- ./wrapper -->
</div>
<!-- jQuery 3 -->
<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/js/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/adminLTE/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/adminLTE/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/adminLTE/js/demo.js}"></script>
<script th:src="@{/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{https://webapi.amap.com/demos/js/liteToolbar.js}"></script>
<!--<script src="https://webapi.amap.com/maps?v=1.4.15&key=c90556670e5484fddaaa15087d0e556f&plugin=AMap.Scale,AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch,AMap.Geolocation"></script>-->
<script type="text/javascript" th:src="@{https://cache.amap.com/lbs/static/addToolbar.js}"></script>
</body>
    <script>
//-------------------------------------------创建地图
        var scale = new AMap.Scale({
        visible: false
         }),  //创建地图
          map = new AMap.Map('container', {
          resizeEnable: true,
          zoom: 12,
          center: [104.071915,30.658871]
        }),
        toolBar = new AMap.ToolBar({
         visible: false
         });
        
        map.addControl(scale);
        map.addControl(toolBar);
        map.plugin(["AMap.MouseTool"],function(){        //鼠标工具插件
        mousetool = new AMap.MouseTool(map);  
       // mousetool.marker(); //使用鼠标工具，在地图上画标记点
    });

     //-----------------------------------------------加载比例尺插件   
    map.plugin(["AMap.Scale"],function(){      
        scale = new AMap.Scale();  
        map.addControl(scale);  
        scale.show();
    });


    
    //--------------------------------------------------关键词查询

    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
      var autoOptions = {
        city: "成都", //城市，默认全国
        input: "keyword"//使用联想输入的input的id
      };
      autocomplete= new AMap.Autocomplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
            city:'510100',
            map:map
      })
      AMap.event.addListener(autocomplete, "select", function(e){
         //TODO 针对选中的poi实现自己的功能
         placeSearch.setCity(e.poi.adcode);
         placeSearch.search(e.poi.name)
      });
    });
        
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });
    //-------------------------------------------------------行政区查询
    function zz(id) {
        var aa = document.getElementById(id);
        var i = aa.selectedIndex;
        var text = aa.options[i].text;
        var value = aa.options[i].value;

        document.getElementById('district').value = text;
    }
    var district = null;
    var polygons=[];
    function drawBounds() {
        //加载行政区划插件
        if(!district){
            //实例化DistrictSearch
            var opts = {
                subdistrict: 0,   //获取边界不需要返回下级行政区
                extensions: 'all',  //返回行政区边界坐标组等具体信息
                level: 'district'  //查询行政级别为 市
            };
            district = new AMap.DistrictSearch(opts);
        }
        //行政区查询
        district.setLevel(document.getElementById('level').value)
        district.search(document.getElementById('district').value, function(status, result) {
            map.remove(polygons)//清除上次结果
            polygons = [];
            var bounds = result.districtList[0].boundaries;
            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                    //生成行政区划polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: '#80d8ff',
                        strokeColor: '#0091ea'
                    });
                    polygons.push(polygon);
                }
            }
            map.add(polygons)
            map.setFitView(polygons);//视口自适应
        });
    }
    
    document.getElementById('draw').onclick = drawBounds;
    document.getElementById('district').onkeydown = function(e) {
        if (e.keyCode === 13) {
            drawBounds();
            return false;
        }
        return true;
    };
// aaaa-----------------------------------------------------------无用代码
        function toggleScale(checkbox) {
            if (checkbox.checked) {
                scale.show();
            } else {
                scale.hide();
            }
        }
        function toggleToolBar(checkbox) {
            if (checkbox.checked) {
                showToolBar();
                showToolBarDirection();
                showToolBarRuler();
            } else {
                hideToolBar();
                hideToolBarDirection();
                hideToolBarRuler();
            }
        }
        function toggleToolBarDirection(checkbox) {
            if (checkbox.checked) {
                toolBar.showDirection()
            } else {
                toolBar.hideDirection()
            }
        }
        function toggleToolBarRuler(checkbox) {
            if (checkbox.checked) {
                toolBar.showRuler();
            } else {
                toolBar.hideRuler();
            }
        }
//--------------------------------------------------------------更新语句
    // window.onload()=function(){
    //     var a = document.getElementById("a");
    //
    //     a.setAttribute("onclick", "click()");
    // }

    // function ClearTextBox(){
    //
    //     window.location.reload();
    //
    // }

    $('#cleartext').on('click',function () {

        $.ajax({
            url:"/doors/map",
            type:"post",
            success:function () {
                // $("#keyword").val("请输入关键字：(选定后搜索)");
                // $("#district").val("");
                window.location.reload();
            },
            fail:function () {
                console.log("刷新失败")
            }
        })

    });

        //-----------------------------------------------鼠标事件
        map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
        var auto = new AMap.Autocomplete({
            input: "tipinput"
        });
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }

/**
 * --------------------------------------------------------在地图上标记点
 */



var markers;
$(function(){
    $.getJSON('/doors/getJson',function(data){
        markers=data;
        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
        markers.forEach(function(marker) {
            new AMap.Marker({
                map: map,
                icon: marker.icon,
                position: [marker.position[0], marker.position[1]],
                offset: new AMap.Pixel(-12, -36)
            });
        });

        // 添加事件监听, 使地图自适应显示到合适的范围
        AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
            var newCenter = map.setFitView();
            document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
            document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
        });
    });

});


   </script>

</html>
